Toolbar的详细介绍和自定义Toolbar

您所在的位置:网站首页 layui 自定义toolbar Toolbar的详细介绍和自定义Toolbar

Toolbar的详细介绍和自定义Toolbar

2024-01-12 14:59| 来源: 网络整理| 查看: 265

本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布

在此总结一下,Android Toolbar 控件的使用方法,争取总结的系统全面些。之前也只是停留在一些基本简单的用法,而且也不系统。希望爱学习的你能通过这篇文章,有所收获!

Toolbar 的基本用法 常用的方法

xml中的设置:

如果你不在xml中设置参数的话,代码中的设置:

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); toolbar.setTitle("标题"); toolbar.setTitleTextColor(Color.WHITE); toolbar.setNavigationIcon(R.drawable.ic_back_white_24dp); //点击左边返回按钮监听事件 toolbar.setNavigationOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { } });

由于比较简单,效果图这里也不在贴出啦。

全面但包括不太常用的用法

xml中的配置:

同样如果不在xml中设置参数的话,代码中的设置: 这里就不在贴出代码啦,设置的时候,先敲打出xml配置中的关键单词或首字母,就会自动提示的。大部分在xml有的属性,代码中都可以设置

效果图:

注意事项: 1:如果你添加了这行代码 setSupportActionBar(toolbar); 那么 toolbar.setNavigationOnClickListener监听方法,要放到其后面,否则点击事件,监听不到的。如果你用不到ActionBar的一些特性的话,建议setSupportActionBar(toolbar); 这行代码不用添加了。

如果你想修改主标题和子标题的文字大小,你可通过如下方式: 首先定义一个style:

#f0f0 15sp #f0f0 10sp

然后:

效果图这里不在贴出了,通过app:titleTextAppearance=”@style/ToolbarTitle”方法的设置,就能修改标题字体的大小,当然文字颜色也可以修改。

到这里,你可能要问了,如果,我想要标题居中,怎么办呢?查看api,toolbar没有使其居中的方法,也就提供了使其距左右,上下边距大小的方法。不过不用担心,这里还是有办法的。看如下代码:

效果图:

注意: 此时 TextView 控件的宽和高都是自适应大小,java 代码中此行代码setSupportActionBar(toolbar);就不要添加了,否则就会显示不正常。如果你非要添加setSupportActionBar(toolbar);这行代码的话,TextView 控件的宽要用match_parent属性。这里再次建议setSupportActionBar(toolbar);这行代码就不要点添加了。 至于它的作用,在此做一下简单的说明吧: 1)在Toolbar这个控件出现之前,其实我们也可以通过 ActionBar actionBar = getSupportActionBar(); 方法获取到acitonbar,(前提你的activity主题theme,是采用的带actionbar的主题,如果你采用这样的主题android:theme="@style/Theme.AppCompat.Light.NoActionBar">拿到的actionBar也是 null,显然是不行的)之后你就可以采用诸如下面的方面来操作actionbar啦。

ActionBar actionBar = getSupportActionBar(); if (actionBar != null) { actionBar.setDisplayHomeAsUpEnabled(true); actionBar.setDisplayShowTitleEnabled(true); actionBar.setTitle("主标题"); ...... } else { Log.i(TAG, "onCreate: actionBar is null"); }

但是,原生自带的ActionBar设置的灵活性,还是有限,因此Toolbar 这个控件,也就应运而生啦!此时,有的小伙伴说了,我虽然使用了Toolbar来代替ActionBar,但是我还想使用ActionBar的一些特性怎么办呢?这个时候 setSupportActionBar(toolbar);就发挥其作用啦。添加这行代码,你的toolbar可以说也就具有了ActionBar的相关属性了。好啦,到此setSupportActionBar(toolbar) 的作用也讲完了。如果你还不太明白的话,可以参考一下篇文章: ActionBar和Toolbar的基础使用

结合menu配置文件的用法。

这里先看一下效果图:

首先在menu文件夹中,创建名为 menu.xml 文件(文件名随意的):

然后在代码中这样加载该menu文件即可:

toolbar.inflateMenu(R.menu.menu);

最后运行代码,就是上图的效果。

在这里,app:showAsAction 属性还是很有必要介绍一下滴。 app:showAsAction 有以下三个属性:

ifRoom 表示在屏幕空间足够的情况下显示在Toolbar中,不够的话就显示在菜单中never 表示永远不显示在Toolbar中,而是一直显示在菜单中always 表示永远显示在Toolbar中,如果屏幕空间不够则不显示

注意:Toolbar中的action按钮只会显示图标,菜单中的action按钮只会显示文字。

那如果设置了ifRoom 属性之后,既然只显示图标不显示文字,那还设置 android:title=”Search” 文字干嘛呢?如果你设置了之后,虽然不显示,但是你长按相应按钮后,就会吐司相应文字内容的。

细心的你可能发现还有些不足的地方,就是上图的点击菜单选项时,弹出的菜单位置有点太靠上啦,能不能设置呢,还有菜单的背景和文字颜色能不能设置呢?答案当然是可以的!

首先设置好样式:

--#000000--> @style/OverflowMenuStyle --新增一个item,用于控制menu--> false --把该属性改为false即可使menu位置位于toolbar之下-->

然后直接在这里引用就可以了: app:popupTheme=”@style/ToolbarPopupTheme”

效果图:

与AppBarLayout结合的使用 (1): app:layout_scrollFlags=”scroll”

xml代码:

首先注意最外层:包裹了一层 android.support.design.widget.CoordinatorLayout 布局,那CoordinatorLayout 布局是什么的,我们可以理解为它是加强版的FramLayout。然后注意:Toolbar 的新添加的这条属性 app:layout_scrollFlags=”scroll” 。最后看一看效果图:

PS:对于 scroll 属性,网上也有说的比较专业的,不过我认为从产生的效果角度去分析的话,那就是:往上滑动就不说了,往下滑动就是当下面的滚动布局滑动到顶端时,标题栏toolbar才会滑出来。该属性实用性一般吧。

(2):app:layout_scrollFlags=”scroll|enterAlways”

scroll 与 enterAlways 结合产生的效果图如下:

PS:我们还是从产生的效果角度去分析的:往下滑动时,,标题栏 toolbar 会优先滑出来,然后滚动布局才开始滑动。就像该单词的意思一样:总是在。也就是只要添加了该属性值,下滑时 toolbar 总是优先滑出来。该属性比较实用。

(3): app:layout_scrollFlags=”scroll|enterAlways|snap”

在以上基础上,在与 snap 结合所产生的效果图如下:

PS:还是从产生的效果角度去分析的:不管是往下或者往上滑动时,,标题栏 toolbar 首先还是和(2)中一样的,不过有个细微的不同,toolbar会根据当前的滚动距离,自动选择是隐藏还是显示。该属性实用性也一般。

(4): app:layout_scrollFlags=”scroll|enterAlways|exitUntilCollapsed”

scroll 与 enterAlways 与 exitUntilCollapsed 结合所产的效果图如下:

注意此时Toolbar的布局有些许改变(改变后的):

我们给Toolbar 设置了一个最小高度 android:minHeight=”40dp”,然后又把正常高度改变了,并随意改成了100dp。

PS:还是从产生的效果角度去分析的:默认toolbar 显示的正常高度值我们设置成的100dp,当我们上滑的时候,高度达到最小高度40dp时,toolbar不在滑动了。该属性感觉实用性不强。

(5): app:layout_scrollFlags=”scroll|enterAlways|enterAlwaysCollapsed”

scroll 与 enterAlways 与 enterAlwaysCollapsed 结合所产的效果图如下:

xml中Toolbar 的布局和(4)还是一样的,不过app:layout_scrollFlags属性,由原来的exitUntilCollapsed改为enterAlwaysCollapsed。

PS:还是从产生的效果角度去分析的:默认toolbar 显示的正常高度值我们设置成的100dp,当我们上滑的时候,toolbar直到完全隐藏时,下面的滚动布局才开始发生滚动;下滑时toolbar会优先滑出设置的最小高度值,然后当滚动布局下滑到顶部时,后面的toolbar部分,才开始完全显示(滑)出来。该属性感觉实用性也不强。

与CollapsingToolbarLayout结合的使用

(1):先看下效果图:

再把代码贴上:

这里我们重点关注 CollapsingToolbarLayout控件 以下的几个属性:

app:contentScrim=”?attr/colorPrimary” 当上滑到toolbar 高度期间直到达到toolbar高度时,给toolbar设置的背景色,以及过渡颜色。当然,这里不仅仅可以设置颜色,也可以设置图片。 如果不设置该属性,标题栏会过渡为以之前的图片为背景。app:layout_scrollFlags=”scroll” 和介绍 AppBarLayout 时,给Toolbar 设置和配置一样。其效果上图已做展示。app:expandedTitleGravity=”center_horizontal” 从单词意思可以看出,这是展示后,title的位置。app:expandedTitleMarginStart=”50dp” 从单词意思可以看出,这是展示后,title 距离开始位置的边距。app:collapsedTitleGravity=”center” 从单词意思可以看出,这是收缩后,title 位置(测试发现,不好用)。app:expandedTitleTextAppearance=”@style/transparentText” 展开后标题文字的样式app:collapsedTitleTextAppearance=”@style/ToolbarTitle” 折叠后标题文字的样式

给 ImageView 控件 设置的 app:layout_collapseMode=”parallax” 属性说明: app:layout_collapseMode有两个参数:

parallax 子View可以选择在当前的布局当时是否以“视差”的方式来跟随滚动。(PS:其实就是让这个View的滚动的速度比其他正常滚动的View速度稍微慢一点)。pin 测试发现,按照以上的布局,如果你使用pin参数,看效果,和使用parallax 参数,好像没有什么区别。目前个人认为的区别后面在做介绍。

注意事项:

1.上图中背景图,也就是xml中的 ImageView 控件,设置的图片大小,在保证显示正常的情况下,越小越好。太大的话,在展示的时候,会有卡顿的感觉。

下面我们来看一个效果图:

如果你发现展开和折叠后的标题字体太小或太大,你可通过如下两个属性设置:

app:expandedTitleTextAppearance="@style/transparentText" 展开后标题文字的样式 app:collapsedTitleTextAppearance="@style/ToolbarTitle" 折叠后标题文字的样式

transparentText (透明)样式:

#00000000 15sp

ToolbarTitle样式:

#f0f0 15sp

细心的你,会发现我们的状态栏,现在是完全透明的状态。那我们怎么实现呢?那你会说了,那还不简单! 使用下面的代码:

//透明状态栏效果 if (Build.VERSION.SDK_INT >= 21) { View decorView = getWindow().getDecorView(); int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE; decorView.setSystemUiVisibility(option); getWindow().setStatusBarColor(Color.TRANSPARENT); }

不就能实现吗!或者使用第三方 透明状态栏设置库。很简单的就能实现了。如果你真正具体操作了,运行代码了。你会发现,是实现不了的。不过你把上述代码中 ImageView 控件的 app:layout_collapseMode 的参数设置为 pin 。如下: app:layout_collapseMode=”pin” 。此时你在试一下,就能实现上图的效果啦。现在也能说明,parallax 和 pin 的一个区别吧。

app:layout_scrollFlags=”scroll|enterAlways”

那么 app:layout_scrollFlags=”scroll|enterAlways” 效果怎样呢?下面看图说话:

PS:这里也不再多说了,原理和介绍 AppBarLayout 时,给Toolbar 设置和配置基本差不多。

app:layout_scrollFlags=”scroll|exitUntilCollapsed”

效果图:

app:layout_scrollFlags=”scroll|enterAlways|exitUntilCollapsed”

PS:这里不再贴出效果图啦,聪明的你,相信也能想象出其效果。(不过这样结合的配置,感觉不常用也不太实用。上面贴图的几种效果,还比较实用一些。)

文章写了好几天,才算写的个差不多,如果对你有些帮助的话,给个赞和好评吧!

引申拓展—–实现悬浮栏的效果 如何自定义Toolbar 标题栏

ToolBar 的封装

Android ToolBar 使用完全解析

【android MaterialDesign】 用法总结

Android 详细分析AppBarLayout的五种ScrollFlags



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3